<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title id="i18n-title">辛巳学习日志网</title>
    <link rel="stylesheet" href="assets/css/styles.css">
    <script src="assets/js/i18n.js"></script>
    <!-- 标签页图标 -->
    <link rel="icon" type="image/png" href="assets/img/头像.png">
    <!-- 新增按钮样式 -->
    <style>
        .birthday-button {
            display: inline-block;
            padding: 12px 30px;
            margin: 30px 0;
            background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
            color: white;
            border-radius: 25px;
            text-decoration: none;
            font-weight: 500;
            box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .birthday-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
        }

        @media (max-width: 480px) {
            .birthday-button {
                padding: 10px 25px;
                font-size: 14px;
                margin: 20px 0;
            }
        }
    </style>
</head>
<body>
    <header>
        <h1 id="i18n-title">辛巳学习日志网</h1>
        <p id="i18n-subtitle">记录每一天的学习历程</p>
    <button id="i18n-lang-switch" class="lang-switch-btn">English</button>
    </header>

    <!-- 主页目录卡片区 -->
    <div class="home-menu-card">
        <div class="menu-avatar-wrap">
            <img src="assets/img/头像.png" alt="我的头像" class="menu-avatar">
        </div>
        <div class="menu-content-wrap">
            <button id="menu-toggle" class="menu-toggle-btn">📂 目录</button>
            <div id="menu-list" class="menu-list">
                <div class="menu-item">
                    <span class="menu-emoji">📖</span>
                    <a id="i18n-studylog-https" href="https://doc.lz-0315.com/" target="_blank" rel="noopener" class="menu-link">学习日志网（https，待完善）</a>
                    <a id="i18n-studylog-http" href="http://doc.lz-0315.com/" target="_blank" rel="noopener" class="menu-link">学习日志网（http）</a>
                </div>
                <div class="menu-item">
                    <span class="menu-emoji">🗂️</span>
                    <a id="i18n-resource-https" href="https://clouddisk.lz-0315.com" target="_blank" rel="noopener" class="menu-link">资源镜像站（https，待完善）</a>
                    <a id="i18n-resource-http" href="http://download.clouddisk.lz-0315.com:12440/" target="_blank" rel="noopener" class="menu-link">资源镜像站（http）</a>
                </div>
                <div class="menu-item">
                    <span class="menu-emoji">🎂</span>
                    <a id="i18n-birthday-https" href="https://birthday.lz-0315.com/" target="_blank" rel="noopener" class="menu-link birthday-link">生日特别页（https）</a>
                    <a id="i18n-birthday-http" href="http://birthday.lz-0315.com/" target="_blank" rel="noopener" class="menu-link birthday-link">生日特别页（http）</a>
                </div>
            </div>
        </div>
    </div>
    <script>
        // ...菜单展开收起逻辑已集成到 i18n.js ...
    </script>

    <main>
        <section>
            <h2 id="i18n-study-plan">学习计划</h2>
            <p id="i18n-study-tip">每天进步一点点</p>
        </section>
    </main>

    <footer>
        <div class="footer-content">
            <p>
                <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener" id="i18n-icp">陇ICP备2024015550号-1</a>
            </p>
            <div class="logo-container">
                <a href="https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral" target="_blank" rel="noopener">
                    <img id="footer-logo" src="assets/img/upyun_logo.svg" alt="又拍云" class="footer-logo">
                </a>
            </div>
        </div>
    </footer>

    <!-- 鼠标/触摸跟随散花特效 -->
    <script>
    // 花瓣颜色，可自定义
    const petalColors = ['#ff6b6b', '#ff8e8e', '#ffd86b', '#6bffb3', '#6bcaff', '#b36bff', '#ff6bda'];
    function createPetal(x, y, extra=false) {
        const petal = document.createElement('div');
        const size = extra ? Math.random() * 18 + 18 : Math.random() * 12 + 8;
        petal.style.position = 'fixed';
        petal.style.left = (x - size/2) + 'px';
        petal.style.top = (y - size/2) + 'px';
        petal.style.width = size + 'px';
        petal.style.height = size + 'px';
        petal.style.pointerEvents = 'none';
        petal.style.zIndex = 9999;
        petal.style.borderRadius = '50%';
        petal.style.opacity = '0.8';
        petal.style.background = petalColors[Math.floor(Math.random()*petalColors.length)];
        petal.style.boxShadow = `0 0 8px 2px ${petal.style.background}`;
        petal.style.transform = `rotate(${Math.random()*360}deg)`;
        document.body.appendChild(petal);
        // 动画消失
        setTimeout(() => {
            petal.style.transition = 'all 0.8s cubic-bezier(.4,2,.6,1)';
            petal.style.opacity = '0';
            petal.style.transform += ' scale(1.8) translateY(-30px)';
        }, 30);
        setTimeout(() => {
            petal.remove();
        }, 900);
    }
    // 鼠标移动/触摸跟随
    function scatter(e, extra=false) {
        let x, y;
        if (e.touches) {
            for (let i=0; i<e.touches.length; i++) {
                x = e.touches[i].clientX;
                y = e.touches[i].clientY;
                createPetal(x, y, extra);
            }
        } else {
            x = e.clientX;
            y = e.clientY;
            createPetal(x, y, extra);
        }
    }
    document.addEventListener('mousemove', scatter);
    document.addEventListener('touchmove', scatter);
    // 点击/触摸时生成更多粒子
    function burst(e) {
        let x, y;
        if (e.touches) {
            for (let i=0; i<e.touches.length; i++) {
                x = e.touches[i].clientX;
                y = e.touches[i].clientY;
                for (let j=0;j<12;j++) createPetal(x+Math.random()*40-20, y+Math.random()*40-20, true);
            }
        } else {
            x = e.clientX;
            y = e.clientY;
            for (let j=0;j<12;j++) createPetal(x+Math.random()*40-20, y+Math.random()*40-20, true);
        }
    }
    document.addEventListener('click', burst);
    document.addEventListener('touchstart', burst);
    </script>
</body>
</html>